<template>
  <v-app-bar app color="surface" elevation="2">
    <!-- 左侧：菜单按钮和标题 -->
    <v-app-bar-nav-icon @click.stop="$emit('toggle-drawer')" class="mr-2" />

    <v-toolbar-title class="d-flex align-center">
      <v-icon class="mr-2" icon="mdi-spider" />
      <span class="font-weight-bold">爬虫数据管理平台</span>
    </v-toolbar-title>

    <!-- 中间：搜索框（桌面端显示） -->
    <v-text-field v-if="!isMobile" v-model="search" class="mx-4" density="compact" variant="outlined"
      placeholder="搜索..." prepend-inner-icon="mdi-magnify" hide-details single-line clearable
      style="max-width: 400px" />

    <v-spacer />

    <!-- 右侧：功能按钮 -->
    <notification-menu />
    <user-menu />

    <!-- 移动端搜索按钮 -->
    <v-btn v-if="isMobile" icon variant="text" @click="showMobileSearch = !showMobileSearch">
      <v-icon>mdi-magnify</v-icon>
    </v-btn>
  </v-app-bar>

  <!-- 移动端搜索栏 -->
  <v-slide-y-transition>
    <v-card v-if="showMobileSearch" class="mobile-search-bar" elevation="4">
      <v-text-field v-model="search" variant="solo" placeholder="搜索..." prepend-inner-icon="mdi-magnify" hide-details
        single-line clearable autofocus @keyup.enter="handleSearch" />
    </v-card>
  </v-slide-y-transition>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useDisplay } from 'vuetify'
import NotificationMenu from './NotificationMenu.vue'
import UserMenu from './UserMenu.vue'

const { mobile } = useDisplay()
const isMobile = computed(() => mobile.value)
const search = ref('')
const showMobileSearch = ref(false)

function handleSearch() {
  console.log('Search for:', search.value)
  showMobileSearch.value = false
}
</script>

<style scoped>
.mobile-search-bar {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 12px;
  border-radius: 0;
}
</style>